<template>
    <div class="buy_content">
        <div class="order">
            <div class="title">订单填写</div>
            <div class="form">
                <el-form :model="form" label-width="104" style="max-width: 600px">
                    <el-form-item label="IP数量:">
                        <el-input-number v-model="formdata.number" :min="1" :max="1" controls-position="right"
                            style="width: 336px" />
                    </el-form-item>
                    <el-form-item label="服务期限:">
                        <el-select v-model="formdata.time" placeholder="服务期限" style="width: 336px">
                            <el-option v-for="item in [{ value: 1, label: '一周' }]" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="国家/地区:">
                        <el-select v-model="formdata.region" placeholder="国家/地区" style="width: 336px">
                            <el-option v-for="item in regions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="pay">
            <div class="title">支付方式</div>
            <div class="radio">
                <el-radio-group v-model="radio1">
                    <el-radio value="1">能量</el-radio>
                </el-radio-group>
                <div class="available">(可用能量 1000)</div>
            </div>
        </div>
        <div class="total">
            <div>总计:</div>
            <div>100 能量 (1 IP*1 周)</div>
        </div>
        <div class="buttons">
            <el-button v-if="buttonshow" class="submit" @click="submit()">确认</el-button>
            <el-button v-else class="submit2" disabled>购买中...</el-button>
        </div>
    </div>
</template>

<script setup>
import http from '@/utils/http'
import { http as httpuc } from '@/utils/uc-http'
import { ElMessage } from 'element-plus'
const radio1 = ref('1')
const buttonshow = ref(true)
const regions = ref([])
const formdata = ref({
    number: 1,
    region: 'hk',
    time: 1
})

const submit = () => {
    buttonshow.value = false
    let body = JSON.parse(JSON.stringify(formdata.value))
    delete body.time

    http.post('/proxyip/get_fees_ip', body).then((res) => {
        ElMessage.success('购买成功')
        buttonshow.value = true
    }).catch(() => {
        buttonshow.value = true
    })
}



onMounted(() => {
    httpuc.get('/api_ip_regions').then(res => {
        regions.value = res.map(item => {
          return { value: item.code, label: item.name_zh }
        })
        formdata.value.region = regions.value.length > 0 ? regions.value[0].value : ''
  })
})
</script>

<style lang="scss" scoped>
.buy_content {
    display: flex;
    flex-direction: column;
}

.order {
    display: flex;
    flex-direction: column;

}

.title {
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.pay {
    margin-top: 8px;

    .radio {
        margin-left: 104px;
        display: flex;
        align-items: center;

        .available {
            font-size: 14px;
            color: #8a8a8a;
            margin-left: 8px;
        }
    }

}

.total {
    margin-top: 32px;
    width: 100%;
    height: 40px;
    background-color: #fff4ec;
    border-top: 2px solid var(--pcmain-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.buttons {
    margin-top: 40px;
    display: flex;
    justify-content: center;

    .submit {
        width: 240px;
        height: 48px;
        background-color: var(--pcmain-color);
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .submit2 {
        width: 240px;
        height: 48px;
        background-color: var(--pcmain-color);
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: .5;
    }
}
</style>

<style>
.buy_content .el-form-item {
    margin-bottom: 24px;
}

.buy_content .el-form-item__label {
    font-size: 14px;
    color: #333;
}

.buy_content .el-form-item .el-select__wrapper .el-select__selected-item {
    font-size: 14px !important;
    color: #333 !important;
}

.radio .el-radio .el-radio__label {
    font-size: 16px;
    color: #333;
}

.radio .el-radio__input.is-checked .el-radio__inner {
    width: 16px;
    height: 16px;
    background-color: #fff;
    border: 2px solid var(--pcmain-color);
}

.radio .el-radio .el-radio__inner::after {
    width: 8px;
    height: 8px;
    background-color: var(--pcmain-color);
}
</style>